<template>
    <div class="table">
        <!--主体-->
        <div class="container">
            <i class="el-icon-refresh" style="font-size: 18px;padding-bottom: 20px" @click="update"></i>
            <!--搜索-->
            <div class="handle-box">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"
                                  @keyup.enter.native="search">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                        <el-button type="primary" icon="search" @click="search">搜索</el-button>
                    </el-col>
                    <el-col :span="12">
                        <div style="font-size: 12px;color: #999;">
                            <span style="font-size: 20px">涉及文档数约为</span><span style="padding: 0 10px">≈</span><span
                            style="font-size: 20px">{{Quantity}}</span>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <!--列表内容-->
            <div>
                <ul class="author-list">
                    <li class="clear" v-for="(Data,index) in tableData">
                        <div class="author-list-title">
                            <span class="num">{{index + 1}}.</span>
                            <a :href="Data.url" target="_blank">{{Data.title}}</a>
                        </div>
                        <div class="author-list-type">
                            <b>【作者】</b>
                            <span v-for="authors in Data.authors" style="padding: 0 10px">{{authors.authorName}}</span>
                        </div>
<!--                        <div class="author-list-type-info">
                            <b>【机构】</b>
                            <span v-for="authors in Data.authors"
                                  style="padding: 0 10px">{{authors.institution}}</span>
                        </div>-->
                        <div class="author-list-keyword">
                            <b>【关键词】</b>
                            <span v-for="keyWords in Data.keyWords">{{keyWords}}<span>；</span></span>
                        </div>
                    </li>
                </ul>
            </div>
            <!--Vue组件-->
            <el-row :gutter="20">
                <el-col :offset="13">
                    <div class="page-bar">
                        <ul>
                            <li v-if="cur>1"><a @click="cur--,pageClick()">上一页</a></li>
                            <li v-if="cur==1"><a class="banclick">上一页</a></li>
                            <li v-for="index in indexs" :class="{ 'active': cur == index}">
                                <a @click="btnClick(index)">{{ index }}</a>
                            </li>
                            <li v-if="cur!=all"><a @click="cur++,pageClick()">下一页</a></li>
                            <li v-if="cur == all"><a class="banclick">下一页</a></li>
                            <li><a>共<i>{{all}}</i>页</a></li>
                        </ul>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                /*搜索*/
                select_word: '',
                searchUrl: 'http://bigdata-api.huimeimt.cn/resource_server/papermdm/pubmed_query/',
                /*获取token*/
                access_token: '',
                /*数量*/
                Quantity: '0',
                /*数据*/
                tableData: [],
                /*Vue组件*/
                all: "",
                cur: 1,
            }
        },
        created() {
            this.gainTtoken();
        },
        methods:{
            /*获取token*/
            gainTtoken() {
                this.$axios({
                    method: 'GET',
                    url: 'http://bigdata-oauth.huimeimt.cn/Dataplatform/token',
                }).then((res) => {
                    this.access_token = res.data.access_token
                })
            },
            /*搜索*/
            search() {
                if (this.excludeSpecial(this.select_word) != "") {
                    this.cur = 1;
                    this.req(this.searchUrl,this.select_word,this.access_token,this.cur)
                } else {
                    this.$message({
                        message: '请输入关键词！',
                        type: 'warning'
                    });
                }

            },
            req(Url,select_word,access_token,cur) {
                this.$axios({
                    method: 'GET',
                    headers: {'Content-Type': 'application/json;charset=UTF-8'},
                    url: Url + this.excludeSpecial(select_word) + "?access_token=" + access_token + "&page=" + cur,
                }).then((res) => {
                    if (res.data.result.length > 0) {
                        TweenLite.to(this.$data, 0.5, {Quantity: res.data.result[0].total});
                        this.all = Math.round(res.data.result[0].total / 20);
                        this.tableData = res.data.result
                    } else {
                        this.tableData = [];
                        this.Quantity = 0;
                        this.all = 0;
                        this.$message({
                            message: '无数据！',
                            type: 'warning'
                        });
                    }
                });
            },
            /*刷新*/
            update() {
                location.reload();
            },
            /*Vue组件*/
            btnClick(data) {
                if (data != this.cur) {
                    this.cur = data
                    this.req(this.searchUrl,this.select_word,this.access_token,this.cur)
                }
            },
            pageClick() {
                this.req(this.searchUrl,this.select_word,this.access_token,this.cur)
            },
            /*去除非法字符*/
            excludeSpecial(s) {s = s.replace(/[^\u4e00-\u9fa5a-zA-Z0-9\w]/g,' ');return s;}
        },
        computed: {
            indexs() {
                var left = 1;
                var right = this.all;
                var ar = [];
                if (this.all >= 5) {
                    if (this.cur > 3 && this.cur < this.all - 2) {
                        left = this.cur - 2
                        right = this.cur + 2
                    } else {
                        if (this.cur <= 3) {
                            left = 1
                            right = 5
                        } else {
                            right = this.all
                            left = this.all - 4
                        }
                    }
                }
                while (left <= right) {
                    ar.push(left)
                    left++
                }
                return ar
            },
        },
    }
</script>

<style scoped>
    .container {
        margin: 10px 0;
    }
    .handle-box {
        margin-bottom: 20px;
    }
    .handle-input {
        width: 300px;
        display: inline-block;
    }
    /*列表内容*/
    b {
        font-family: "microsoft yahei";
        font-weight: bold;
        font-style: normal;
        font-size: 12px;
    }
    .author-list {
        padding: 0 10px;
        background-color: #fff;
    }
    .author-list > .clear {
        padding: 15px 0;
        border-bottom: 1px solid #ebebeb;
    }
    .author-list-title {
        margin-bottom: 5px;
    }
    .author-list-title > .num {
        font-size: 14px;
        font-weight: 700;
    }
    .author-list-title > a {
        font-size: 14px;
        color: #333;
        font-weight: bold;
    }
    .author-list-title > a:hover {
        color: #07c4a8;
        text-decoration: underline;
    }
    .author-list-title > a:visited {
        color: blue;
        text-decoration: underline;
    }
    .author-list-type, .author-list-type-info, .author-list-keyword {
        line-height: 18px;
        font-size: 12px;
    }
    /*列表内容结束*/
    /*分页开始*/
    .page-bar {
        margin: 40px;
    }
    ul, li {
        margin: 0px;
        padding: 0px;
    }
    li {
        list-style: none
    }
    .page-bar li:first-child > a {
        margin-left: 0px
    }
    .page-bar a {
        border: 1px solid #ddd;
        text-decoration: none;
        position: relative;
        float: left;
        padding: 6px 12px;
        margin-left: -1px;
        line-height: 1.42857143;
        color: #337ab7;
        cursor: pointer
    }
    .page-bar a:hover {
        background-color: #eee;
    }
    .page-bar a.banclick {
        cursor: not-allowed;
    }
    .page-bar .active a {
        color: #fff;
        cursor: default;
        background-color: #337ab7;
        border-color: #337ab7;
    }
    .page-bar i {
        font-style: normal;
        color: #d44950;
        margin: 0 4px;
        font-size: 12px;
    }
    /*分页结束*/
</style>
